<template>
  <div id="current">
    
    <div class="aa">
      <div class="a">国内疫情</div>
      <div class="b">
        <div class="c">
          <div class="d1">现有确诊占比</div>
        </div>

        <div class="c">
          <div class="d1">全国新增确诊病例</div>
        </div>

        <div class="c">
          <div class="d1">现有新冠患者增减比率</div>
        </div>
      </div>
    </div>

    <div class="z">
      <div class="q">
        <div id="bing"></div>
      </div>
      <div class="w">
        <div id="zhe"></div>
      </div>
      <div class="e">
        <div id="san"></div>
      </div>
    </div>

    <div class="wen">
      2020年12月31日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例19例，其中境外输入病例10例（上海5例，广东2例，福建1例，云南1例，陕西1例），本土病例9例（北京5例，辽宁4例）；无新增死亡病例；新增疑似病例1例，为境外输入病例（在上海）；新增无症状感染者19例（境外输入16例）。
      截至2020年12月31日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例370例（其中重症病例9例），累计治愈出院病例82067例，累计死亡病例4634例，累计报告确诊病例87071例，现有疑似病例1例。累计追踪到密切接触者905493人，尚在医学观察的密切接触者13584人。
      累计收到港澳台地区通报确诊病例9691例。其中，香港特别行政区8846例（出院7813例，死亡148例），澳门特别行政区46例（出院46例），台湾地区799例（出院671例，死亡7例）。
      [1] 2021年相关信息查看词条2021年中国新冠肺炎疫情发展实录。
    </div>

    <div class="zu">
      <div class="zu1">
        <div class="zu11"></div>
        <div class="zu12">截止目前疫情统计条形图→</div>
      </div>
      <div class="zu2">
        <div id="tiao"></div>
      </div>
    </div>
    <!-- 词云 -->
    <div id="ci">
           <wordcloud
      :data="defaultWords"
      nameKey="name"
      valueKey="value"
      :color="myColors"
      :showTooltip="false"
      :wordClick="wordClickHandler"
    >
    </wordcloud>
    </div>
  </div>
</template>


<script>

///////////////////词云//////////////////////////
import wordcloud from "vue-wordcloud";


import "../utils/echarts.min.js";
import "../utils/echarts-wordcloud.min.js";

var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
  var now = new Date((base += oneDay));
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

////////////////////////词/////////////////////

var JosnList = [];

JosnList.push(
  {
    name: "Jayfee",
    value: 666,
  },
  {
    name: "Nancy",
    value: 520,
  },
  {
    name: "生活资源",
    value: "999",
  },
  {
    name: "供热管理",
    value: "888",
  },
  {
    name: "供气质量",
    value: "777",
  },
  {
    name: "生活用水管理",
    value: "688",
  },
  {
    name: "一次供水问题",
    value: "588",
  },
  {
    name: "交通运输",
    value: "516",
  },
  {
    name: "城市交通",
    value: "515",
  },
  {
    name: "环境保护",
    value: "483",
  },
  {
    name: "房地产管理",
    value: "462",
  },
  {
    name: "城乡建设",
    value: "449",
  },
  {
    name: "社会保障与福利",
    value: "429",
  },
  {
    name: "社会保障",
    value: "407",
  },
  {
    name: "文体与教育管理",
    value: "406",
  },
  {
    name: "公共安全",
    value: "406",
  },
  {
    name: "公交运输管理",
    value: "386",
  },
  {
    name: "出租车运营管理",
    value: "385",
  },
  {
    name: "供热管理",
    value: "375",
  },
  {
    name: "市容环卫",
    value: "355",
  },
  {
    name: "自然资源管理",
    value: "355",
  },
  {
    name: "粉尘污染",
    value: "335",
  },
  {
    name: "噪声污染",
    value: "324",
  },
  {
    name: "土地资源管理",
    value: "304",
  },
  {
    name: "物业服务与管理",
    value: "304",
  },
  {
    name: "医疗卫生",
    value: "284",
  },
  {
    name: "粉煤灰污染",
    value: "284",
  },
  {
    name: "占道",
    value: "284",
  },
  {
    name: "供热发展",
    value: "254",
  },
  {
    name: "农村土地规划管理",
    value: "254",
  },
  {
    name: "生活噪音",
    value: "253",
  },
  {
    name: "供热单位影响",
    value: "253",
  },
  {
    name: "城市供电",
    value: "223",
  },
  {
    name: "房屋质量与安全",
    value: "223",
  },
  {
    name: "大气污染",
    value: "223",
  },
  {
    name: "房屋安全",
    value: "223",
  },
  {
    name: "文化活动",
    value: "223",
  },
  {
    name: "拆迁管理",
    value: "223",
  },
  {
    name: "公共设施",
    value: "223",
  },
  {
    name: "供气质量",
    value: "223",
  },
  {
    name: "供电管理",
    value: "223",
  },
  {
    name: "燃气管理",
    value: "152",
  },
  {
    name: "教育管理",
    value: "152",
  },
  {
    name: "医疗纠纷",
    value: "152",
  },
  {
    name: "执法监督",
    value: "152",
  },
  {
    name: "设备安全",
    value: "152",
  },
  {
    name: "政务建设",
    value: "152",
  },
  {
    name: "县区、开发区",
    value: "152",
  },
  {
    name: "宏观经济",
    value: "152",
  },
  {
    name: "教育管理",
    value: "112",
  },
  {
    name: "社会保障",
    value: "112",
  },
  {
    name: "生活用水管理",
    value: "112",
  },
  {
    name: "物业服务与管理",
    value: "112",
  },
  {
    name: "分类列表",
    value: "112",
  },
  {
    name: "农业生产",
    value: "112",
  },
  {
    name: "二次供水问题",
    value: "112",
  },
  {
    name: "城市公共设施",
    value: "92",
  },
  {
    name: "拆迁政策咨询",
    value: "92",
  },
  {
    name: "物业服务",
    value: "92",
  },
  {
    name: "物业管理",
    value: "92",
  },
  {
    name: "社会保障保险管理",
    value: "92",
  },
  {
    name: "低保管理",
    value: "92",
  },
  {
    name: "文娱市场管理",
    value: "72",
  },
  {
    name: "城市交通秩序管理",
    value: "72",
  },
  {
    name: "执法争议",
    value: "72",
  },
  {
    name: "商业烟尘污染",
    value: "72",
  },
  {
    name: "占道堆放",
    value: "71",
  },
  {
    name: "地上设施",
    value: "71",
  },
  {
    name: "水质",
    value: "71",
  },
  {
    name: "无水",
    value: "71",
  },
  {
    name: "供热单位影响",
    value: "71",
  },
  {
    name: "人行道管理",
    value: "71",
  },
  {
    name: "主网原因",
    value: "71",
  },
  {
    name: "集中供热",
    value: "71",
  },
  {
    name: "客运管理",
    value: "71",
  },
  {
    name: "国有公交（大巴）管理",
    value: "71",
  },
  {
    name: "工业粉尘污染",
    value: "71",
  },
  {
    name: "治安案件",
    value: "71",
  },
  {
    name: "压力容器安全",
    value: "71",
  },
  {
    name: "身份证管理",
    value: "71",
  },
  {
    name: "群众健身",
    value: "41",
  },
  {
    name: "工业排放污染",
    value: "41",
  },
  {
    name: "破坏森林资源",
    value: "41",
  },
  {
    name: "市场收费",
    value: "41",
  },
  {
    name: "生产资金",
    value: "41",
  },
  {
    name: "生产噪声",
    value: "41",
  },
  {
    name: "农村低保",
    value: "41",
  },
  {
    name: "劳动争议",
    value: "41",
  },
  {
    name: "劳动合同争议",
    value: "41",
  },
  {
    name: "劳动报酬与福利",
    value: "41",
  },
  {
    name: "医疗事故",
    value: "21",
  },
  {
    name: "停供",
    value: "21",
  },
  {
    name: "基础教育",
    value: "21",
  },
  {
    name: "职业教育",
    value: "21",
  },
  {
    name: "物业资质管理",
    value: "21",
  },
  {
    name: "拆迁补偿",
    value: "21",
  },
  {
    name: "设施维护",
    value: "21",
  },
  {
    name: "市场外溢",
    value: "11",
  },
  {
    name: "占道经营",
    value: "11",
  },
  {
    name: "树木管理",
    value: "11",
  },
  {
    name: "农村基础设施",
    value: "11",
  },
  {
    name: "无水",
    value: "11",
  },
  {
    name: "供气质量",
    value: "11",
  },
  {
    name: "停气",
    value: "11",
  },
  {
    name: "市政府工作部门（含部门管理机构、直属单位）",
    value: "11",
  },
  {
    name: "燃气管理",
    value: "11",
  },
  {
    name: "市容环卫",
    value: "11",
  },
  {
    name: "新闻传媒",
    value: "11",
  },
  {
    name: "人才招聘",
    value: "11",
  },
  {
    name: "市场环境",
    value: "11",
  },
  {
    name: "行政事业收费",
    value: "11",
  },
  {
    name: "食品安全与卫生",
    value: "11",
  },
  {
    name: "城市交通",
    value: "11",
  },
  {
    name: "房地产开发",
    value: "11",
  },
  {
    name: "房屋配套问题",
    value: "11",
  },
  {
    name: "物业服务",
    value: "11",
  },
  {
    name: "物业管理",
    value: "11",
  },
  {
    name: "占道",
    value: "11",
  },
  {
    name: "园林绿化",
    value: "11",
  },
  {
    name: "户籍管理及身份证",
    value: "11",
  },
  {
    name: "公交运输管理",
    value: "11",
  },
  {
    name: "公路（水路）交通",
    value: "11",
  },
  {
    name: "房屋与图纸不符",
    value: "11",
  },
  {
    name: "有线电视",
    value: "11",
  },
  {
    name: "社会治安",
    value: "11",
  },
  {
    name: "林业资源",
    value: "11",
  },
  {
    name: "其他行政事业收费",
    value: "11",
  },
  {
    name: "经营性收费",
    value: "11",
  },
  {
    name: "食品安全与卫生",
    value: "11",
  },
  {
    name: "体育活动",
    value: "11",
  },
  {
    name: "有线电视安装及调试维护",
    value: "11",
  },
  {
    name: "低保管理",
    value: "11",
  },
  {
    name: "劳动争议",
    value: "11",
  },
  {
    name: "社会福利及事务",
    value: "11",
  },
  {
    name: "一次供水问题",
    value: "11",
  }
);

let echarts = require("echarts");

export default {
    //////////////词云////////////////////////////////
  components: {
    wordcloud,
  },
  ///////////////////////词云//////////////////////////////
  data() {
    return {
      myColors: ["#e6ff03", "#7df0ff", "#71ff95", "#ffc06f"],
      defaultWords: [
        {
          name: "空气传播",
          value: 7,
        },
        {
          name: "密切接触",
          value: 9,
        },
        {
          name: "间接触摸",
          value: 8,
        },
        {
          name: "环境影响",
          value: 8,
        },
        {
          name: "气体传播",
          value: 8,
        },
        {
          name: "颗粒粉尘",
          value: 9,
        },
          {
          name: "一次性用品",
          value: 8,
        },
          {
          name: "大气污染",
          value: 7,
        },
          {
          name: "集中人群",
          value: 9,
        },
          {
          name: "外包装用品",
          value: 7,
        },
          {
          name: "衣物鞋子",
          value: 7,
        },
          {
          name: "被感染者传播",
          value: 7,
        },
        {
          name: "病毒携带者",
          value: 7,
        },
        {
          name: "潜伏期感染",
          value: 7,
        },
        {
          name: "气溶胶体",
          value: 9,
        },
        {
          name: "交通出行",
          value: 9,
        },
        {
          name: "间接交流",
          value: 10,
        },
        {
          name: "密闭空间",
          value: 8,
        },
        {
          name: "飞沫流通",
          value: 7,
        },
        {
          name: "医患关系",
          value: 7,
        },
           {
          name: "日常用品",
          value: 10,
        },
        {
          name: "办公",
          value: 10,
        },
        {
          name: "食品残留",
          value: 7,
        },
        {
          name: "环境影响",
          value: 9,
        },
        {
          name: "气体传播",
          value: 7,
        },
        {
          name: "颗粒粉尘",
          value: 9,
        },
          {
          name: "一次性用品",
          value: 8,
        },
          {
          name: "大气污染",
          value: 7,
        },
          {
          name: "集中人群",
          value: 9,
        },
          {
          name: "外包装用品",
          value: 7,
        },
          {
          name: "衣物鞋子",
          value: 7,
        },
          {
          name: "被感染者传播",
          value: 7,
        },
        {
          name: "病毒携带者",
          value: 7,
        },
        {
          name: "潜伏期感染",
          value: 8,
        },
        {
          name: "气溶胶体",
          value: 8,
        },
        {
          name: "交通出行",
          value: 7,
        },
        {
          name: "间接交流",
          value: 7,
        },
        {
          name: "密闭空间",
          value: 8,
        },
        {
          name: "飞沫流通",
          value: 8,
        },
        {
          name: "医患关系",
          value: 8,
        },
      ],
    };
  },
  computed: {},
  methods: {
      ///////////////////词云//////////////////////////////
    wordClickHandler(name, value, vm) {
      console.log("wordClickHandler", name, value, vm);
    },
    //   饼图
    getOption1() {
      return {
        // backgroundColor: '#FFFFE0',

        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#00BFFF",
            fontSize: 26,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 1,
          max: 600,
          inRange: {
            colorLightness: [0.8, 0.2],
          },
        },
        series: [
          {
            name: "疫情统计",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "境外输入" },
              { value: 310, name: "疑似病例" },
              { value: 274, name: "现有确诊" },
              { value: 235, name: "累计出院" },
              { value: 400, name: "累计确诊" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(205,782,92)",
              fontSize: 23,
            },
            labelLine: {
              lineStyle: {
                color: "rgba(30,1474,225)",
              },
              smooth: 0.2,
              length: 41,
              length2: 30,
            },
            itemStyle: {
              shadowBlur: 200,
              color: "#c23531",
              shadowColor: "rgba(23,121,91, 2)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
    },
    //折线图
    getOption2() {
      return {
        color: ["#e6ff03", "#7AB9EE"],
        title: {
          text: "全国疫情新增病例",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新增确诊", "新增疑似"],
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "6%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "新增确诊",
            type: "line",
            data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
          },
          {
            name: "新增疑似",
            type: "line",
            data: [820, 932, 901, 934, 980, 1001, 990, 950, 932, 901, 934, 950],
          },
        ],
      };
    },
    getOption3() {
      return {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: "新冠患者增减比率",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          },
        ],
        series: [
          {
            name: "模拟数据",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)",
                },
              ]),
            },
            data: data,
          },
        ],
      };
    },
    //条形图
    getOption4() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#ffc06f",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["蒸发量", "降水量", "平均温度"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "患者总数",
            min: 0,
            max: 10000,
            interval: 1000,
            axisLabel: {
              formatter: "{value} 人",
            },
          },
          {
            type: "value",
            name: "增长率",
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "新增数",
            type: "bar",
            data: [
              360,
              613,
              1232,
              1822,
              4423,
              5430,
              7888,
              7430,
              5232,
              3323,
              1723,
              433,
            ],
          },
          {
            name: "出院数",
            type: "bar",
            data: [
              280,
              580,
              1078,
              1730,
              4289,
              6050,
              8989,
              8032,
              6232,
              4323,
              1967,
              478,
            ],
          },
          {
            name: "增长率",
            type: "line",
            yAxisIndex: 1,
            data: [
              6.0,
              10.8,
              18.6,
              36.5,
              56.3,
              86.2,
              94.3,
              90.4,
              73.0,
              62.5,
              45.0,
              12.2,
            ],
          },
        ],
      };
    },


    toDraw1() {
      let chart = echarts.init(document.getElementById("bing"));
      let option = this.getOption1();
      chart.setOption(option);
    },
    toDraw2() {
      let chart = echarts.init(document.getElementById("zhe"));
      let option = this.getOption2();
      chart.setOption(option);
    },
    toDraw3() {
      let chart = echarts.init(document.getElementById("san"));
      let option = this.getOption3();
      chart.setOption(option);
    },
    toDraw4() {
      let chart = echarts.init(document.getElementById("tiao"));
      let option = this.getOption4();
      chart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.toDraw1();
    this.toDraw2();
    this.toDraw3();
    this.toDraw4();

  },
};
</script>








<style scoped>
#current {
  height: 6000px;
  background: url("../utils/pei.jpg") no-repeat;
  background-attachment: fixed;
}

.aa {
  border: 6px solid #e6e2ab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 2060px;
  border-radius: 20px;
}
.a {
  height: 40px;
  color: rgb(255, 255, 255);
  font-size: 26px;
  text-indent: 30px;
  font-family: serif;
  /* background-color: rgb(97, 133, 116); */
  line-height: 50px;
  letter-spacing: 8px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a:hover{
    font-size: 30px;
  color: rgb(125, 255, 201);
   /* background-color: turquoise;  */

}
.d1:hover{
    font-size: 30px;
  color: rgb(125, 255, 201);
   /* background-color: turquoise;  */

}
.b {
  height: 100px;
  /* background-color: rgb(97, 133, 116); */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c {
  height: 60px;
  width: 200px;
  /* background-color: rgb(97, 133, 116); */
  float: left;
  margin-left: 340px;
  margin-top: -10px;
  color: rgb(222, 255, 161);
  line-height: 80px;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 16px;
}

.z {
  height: 400px;
  width: 2070px;
  /* background-color: rgb(156, 98, 98); */
}

.q {
  height: 400px;
  width: 690px;
  /* background-color: silver; */
  float: left;
}

.w {
  height: 400px;
  width: 690px;
  /* background-color: rgb(204, 122, 122); */
  float: left;
}
.e {
  height: 400px;
  width: 690px;
  /* background-color: rgb(134, 235, 193); */
  float: left;
  margin-left: px;
}

#bing {
  height: 380px;
  width: 640px;
  float: left;
  margin: 5px;
  border: 6px solid #57e1f3;
  border-radius: 20px;
}
#zhe {
  height: 380px;
  width: 640px;
  float: left;
  margin: 5px;
  border: 6px solid #77ca50;
  border-radius: 20px;
}
#san {
  height: 380px;
  width: 640px;
  float: left;
  margin: 5px;
  border: 6px solid #ff26db;
  border-radius: 20px;
}

.wen {
  height: 400px;
  width: 2030px;
  /* background: steelblue; */
  padding: 20px;
  /* background-color: rgb(97, 133, 116); */
  font-size: 26px;
  text-indent: 30px;
  font-family: serif;
  line-height: 54px;
  letter-spacing: 6px;
  font-weight: bold;
  color: rgb(255, 199, 189);
}
.wen:hover{
    font-size: 26px;
  color: rgb(125, 255, 201);
   /* background-color: turquoise;  */

}

.zu {
  height: 500px;
  width: 2070px;
  /* background-color: thistle; */
}
.zu1 {
  height: 500px;
  width: 830px;
  /* background-color: rgb(158, 62, 158); */
  float: left;
}
.zu11 {
  height: 400px;
  width: 830px;
  /* background-color: rgb(81, 165, 214); */
  background: url("../utils/yi.jpg") no-repeat;
  border-radius: 10px;
  background-size: 100% 100%;
}
.zu12 {
  height: 100px;
  width: 830px;
  /* background-color: rgb(180, 226, 121); */
  font-size: 40px;
  text-indent: 30px;
  font-family: serif;
  line-height: 110px;
  letter-spacing: 10px;
  font-weight: bolder;
  text-indent: 100px;
  color: #b8faff;
}
.zu12:hover{
    font-size: 40px;
  color: rgb(67, 255, 177)
   /* background-color: turquoise;  */

}
.zu2 {
  height: 840px;
  width: 1220px;
  /* background-color: rgb(56, 9, 56); */
  float: right;
  margin-top: 30px;
  border: 6px solid #e6ff03;
  border-radius: 20px;
}

#tiao {
  height: 800px;
  width: 1240px;
}
#ci {
  height: 380px;
  width: 700px;
  float: left;
  margin: 5px;

   border: 6px solid #ffc06f;
}
</style>